<!-- in-store-select -->
<template>
    <div class="in-store-select">
        <div class="left">
            <c-table
            ref="gTb"
            :tableParas="tableParas" 
            :tableData="tb"
            headColor="#7574F1" 
            headTitle="归还组"></c-table>
        </div>
        <div class="right">
            <div class="right-head">
                归还人员
            </div>
            <div class="right-content">
                <template v-for="(person, index) in personList">
                    <el-radio 
                    :key="index"
                    @change="getChangeVal"
                    class="selectRadio"
                    v-model="radio1" 
                    :label="person.username" 
                    >{{person.username}}</el-radio>
                </template>
                
            </div>
        </div>
    </div>
</template>

<script>
import {
    getUserList,
    getOutList
} from '@/apis'
export default {
    name: 'in-store-select',
    components: {
        'c-table': () => import('@/components/c-table')
    },
    data () {
        this.tableParas = [{
            label: '人员',
            prop: 'outUser'

        },{
            label: '维修类型',
            prop: 'jobTypeName'
        }, {
            label: '时间',
            prop: 'outTime'
        }];
        return {
            radio1: '',
            // 人员列表
            personList: [],
            tb: []
        }
    },
    methods: {
        // 人员列表
        getPersons () {
            let per = window.sessionStorage.getItem('per');
            if (per) {
                this.personList = per ? JSON.parse(per) : [];
            } else {
                this.getAllUser();
            }
        },

        // 根据工区 获取人员列表
        async getAllUser () {
            try {
                
                //let id = 99;
                let id = window.localStorage.getItem('organizationId');
                let res = await getUserList(id);
                console.log('获取人员列表', res);
                let {
                    code,
                    msg,
                    data
                } = res.data;
                if (code == 200) {
                    this.personList = data;
                } else {
                    this.$message({
                        type: 'error',
                        message: `${msg}`
                    })
                }
            } catch(e) {
                console.log('获取人员列表',e)
            }
        },

        // 根据工区 获取出库列表
        async getAllOutList () {
            try {
                //let id = 99;
                let id = window.localStorage.getItem('organizationId');
                let res = await getOutList(id);
                console.log('获取出库列表', res);
                let {
                    code,
                    msg,
                    data
                } = res.data;
                if (code == 200) {
                    this.tb = data;
                } else {
                    this.$message({
                        type: 'error',
                        message: `${msg}`
                    })
                }
            } catch(e) {
                console.log('getOutList',e)
            }
        },

        // 获取归还人员
        getChangeVal (val) {
            window.sessionStorage.setItem('se-user', val)
        }
    },
    created () {
        this.getPersons();
        this.getAllOutList();
        if (window.sessionStorage.getItem('se-user')) {
            sessionStorage.removeItem('se-user');
        }

        if (window.sessionStorage.getItem('dataId')) {
            sessionStorage.removeItem('dataId');
        }
    }
}
</script>
<style lang='scss'>
.in-store-select {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .left {
        width: 48%;
        height: 100%;
        float: left;
        margin-right: 5%;
    }

    .right {
        width: 47%;
        height: 100%;
        float: right;

        &-head {
            height: 90px;
            position: relative;
            line-height: 90px;
            font-size: 36px;
            color: #FFFFFF;
            letter-spacing: 0;
            font-weight: 600;
            box-sizing: border-box;
            padding-left: 36px;

            &::before {
                content: '';
                position: absolute;
                width: 8px;
                height: 38px;
                background: #46C58A;
                top: 26px;
                left: 0;
            }
        }

        &-content {
            height: calc(100% - 90px);
            overflow: auto;
            

            .selectRadio {
                width: 200px;
                height: 70px;
                background: url('../../assets/button_nor.png') no-repeat center center;
                background-size: 100% 100%;
                float: left;
                margin-right: 50px;
                margin-bottom: 20px;

                .el-radio__input {
                    display: none!important;
                }

                .el-radio__label {
                    display: block;
                    width: 200px;
                    height: 70px;
                    text-align: center;
                    line-height: 70px;
                    font-size: 32px;
                    color: #FFFFFF;
                    letter-spacing: 0;
                    font-weight: 400;
                    padding-left: 0;
                }

                &:nth-child(3n+3) {
                    margin-right: 0;
                }
            }

            .is-checked {
                background: url('../../assets/button_act.png') no-repeat center center;
                background-size: 100% 100%;
            }
        }
    }
}

</style>